<template>
	<scroll-view class="main">
		<!-- <view class="maskClass" v-show="showMask">
			<view v-show="showMask" style="width:80%; background-color: #fff;padding: 15px;border-radius: 15rpx; margin: 65rpx auto; z-index: 1;" >
				<view style="text-align: center;margin-top: 25rpx;">
					<text style="padding: 35rpx; font-size:35rpx; font-weight:700; text-align:center" >服务详情 </text>
				</view>
				<view class="service-info" style="padding: 25rpx">
					<text>{{contentList[selectedIndex].information || ''}}</text>
				</view>
				<view style="padding: 25rpx">
					<text>{{contentList[selectedIndex].condition}}</text>
				</view>
				<view class="devideline"></view>
				<view style="padding: 35rpx; margin: 35rpx auto; font-size:35rpx; font-weight:700; text-align:center">
					<text >	请选择订单信息 </text>
				</view>
				<view style="width: 100%;margin-top:35rpx;" class="uni-list">
					<radio-group style="font-size: 25rpx;" @change="change">
					  <radio value="0" />
					  在线预约
					  <radio value="1" checked style="margin-left: 35rpx;" />
					  立即下单
					</radio-group>
				</view>
				<view class="login_from_input">
					<view class="form-left">服务时间</view>
					<view class="login_from_fun">
						<picker style="width: 100%;" mode="date" :value="date" :start="startDate" :end="endDate" @change="bindDateChange">
							<view style="font-size: 25rpx; float:left;">{{ date || '请选择服务时间' }}</view>
						</picker>
					</view>
				</view>
				
				<view class="login_from_input">
					<view class="form-left">联系电话</view>
					<view class="login_from_fun"><input type="number" maxlength="11" v-model="orderInfo.userTelphone" placeholder="请输入联系电话"></view>
				</view>
				<view class="submit_view">
					<button type="primary" class="submit" @click="submitOrder()">提交</button>
					<button type="warn" class="canncle" @click="closePopup()">取消</button>
				</view>
			</view>	
		</view> -->
		<!-- <view class="maskClass" v-show="showMaskMember">
			<!-- <uni-transition :mode-class="modeClass" :styles="transfromClass" :show="true"> -->
		<!-- 	<view v-show="showMaskMember" style="width:80%; backgr ound-color: #fff;padding: 15px;border-radius: 15rpx; margin: 65rpx auto; z-index: 1;">
<!-- 				<view style="width:100%;height: fit-content;"> -->
					<!-- <view style="text-align:center;margin-top: 25rpx;">
						<text style="padding: 35rpx; font-size:35rpx; font-weight:700; text-align:center;margin-bottom: 25rpx;" >	个人信息 </text>
					</view>
					<view v-if="personList && personList[seleMemberIndex] != null" style="text-align: center;">
						<image style="height: 200rpx;width: 200rpx;border-radius: 50%;" 
							:src="personList[seleMemberIndex].photo"></image>
					</view>
					<view v-if="personList && personList[seleMemberIndex] != null" style="text-align: center;">
						<text style="margin-top:25rpx;margin-bottom: 25rpx;">{{personList[seleMemberIndex].name}}·</text>
						<text style="color: darkgray;margin-top:25rpx;margin-bottom: 25rpx;">{{personList[seleMemberIndex].position}}</text>
						<view v-if="personList && personList[seleMemberIndex] != null" class="service-info">
							<text>{{personList[seleMemberIndex].information || ''}}</text>
						</view>
					</view> -->
				<!-- </view> -->
				<!-- <view style="width:100%;text-align: center;"> -->
					<!-- <view style="padding: 35rpx; margin: 35rpx auto; font-size:35rpx; font-weight:700; text-align:center">
						<text >请完善咨询信息 </text>
					</view>
					<view class="devideline"></view>
					<view class="login_from_input">
						<view class="form-left">咨询标题</view>
						<view class="login_from_fun"><input v-model="askInfo.title" placeholder="请输入咨询标题"></view>
					</view>
					<view class="login_from_input">
						<view class="form-left">咨询内容</view>
						<view class="login_from_fun">
							<textarea style="height:100rpx; text-align: left;font-size:27rpx ;" type="number" v-model="askInfo.detail" placeholder="请输入咨询内容"></textarea> 
						</view>
					</view>
					<view class="login_from_input">
						<view class="form-left">联系电话</view>
						<view class="login_from_fun"><input type="number" maxlength="11" v-model="askInfo.userPhone" placeholder="请输入联系电话"></view>
					</view> -->
				<!-- </view> -->
				<!-- <view class="submit_view">
					<button type="primary" class="submit" @click="submitAsk()">提交</button>
					<button type="warn" class="canncle" @click="closePopupMember()">取消</button>
				</view> -->
			</view>		
		</view>
		<view>
			<view>
				<image :src="machineDetail.memberServer.logoImg" ></image>
			</view>
			<view class="top-name">
				<text class="title">{{machineDetail.memberServer.realName}}</text>
			</view>
			<view class="type">
				<text class="creator">地址：{{machineDetail.memberServer.address}}</text>
				<text class="publishTime">法人：{{machineDetail.memberServer.legalPerson}}</text>
			</view>
			<view class="content">
				<view class="detail_content" v-html="machineDetail.memberServer.information || ''"></view>
			</view>
			<view class="service-range" v-if="contentList && contentList.length>0 && contentList[0].title != null">
				<text class="title">服务内容</text>
				<view class="service-range-item" v-for="(item,index) in contentList" :key="index">
					<text style="float: left;">{{item.title}}</text>
					<button style="margin-right: 15rpx; width: 100px;text-align: center; float:right" type="primary" size="mini" @click="toggle('center');setInfo(index)">立即下单</button>
					<view class="devideline"></view>
				</view>
				
			</view>
			<view class="service-range" v-if="personList && personList.length >0 && personList[0].name != null">
				<text class="title">服务人员</text>
				<view class="service-range-item" v-for="(item,index) in personList" :key="index">
					<text style="float: left;">{{item.name}}·</text>
					<text style="float: left; color: darkgray;">{{item.position}}</text>
					<button style="margin-right: 15rpx; width: 100px;text-align: center; float:right;" type="primary" size="mini" @click="toggle1('center');setMember(index)">咨询</button>
					<view class="devideline"></view>
				</view>		
			</view>
		</view>		
	</scroll-view>
</template>

<script>
	
	import env from '@/utils/env';
	
	function getDate(type) {
		const date = new Date();
	 
		let year = date.getFullYear();
		let month = date.getMonth() + 1;
		let day = date.getDate();
	 
		if (type === 'start') {
			year = year - 10;
		} else if (type === 'end') {
			year = year + 10;
		}
		month = month > 9 ? month : '0' + month;
		day = day > 9 ? day : '0' + day;
	 
		return `${year}-${month}-${day}`;
	}
	
	import * as order from '@/api/personCenter/ORDER.js'
	import * as data from "@/api/system/dict/data" 
	import * as zjfw from '@/api/service/zjfw/zjfw.js'
	import * as ask from '@/api/ask/ask.js'
	import uniPopup from "@/components/uni-popup/components/uni-popup/uni-popup.vue"
	import uniPopupDialog from "@/components/uni-popup/components/uni-popup-dialog/uni-popup-dialog.vue"

    export default {
		components: {
			uniPopup,
			uniPopupDialog,
		},
		data() {
			return {
				machineDetail: {
					memberServer:{
						logoImg:null,
						realName:null,
						legalPerson:null,
						contact:null,
						address:null,
						information:null,
					}
				},
				contentList:[
					{
						information:null,
						condition:null,
					},
				],
				personList:[
					{
						name:null,
						photo:null,
						position:null,
					},
				],
				categaryLisy:[],
				type: 'top',
				memberType: 'top',
				orderStatus:'0',
				//截止时间选择相关
				date: getDate({
					format: true
				}),
				startDate: getDate('start'),
				endDate: getDate('end'),
				phone:'',
				detail:'',
				orderInfo:{
						details: '',//订单详情描述
						orderType: '',//订单类型
						serverId: '',//服务ID
						serverName: '',//服务名称
						subscribeDate: '',//预约时间
						userId: '',//下单人ID
						userName: '',//下单人名字
						userTelphone:''//下单人电话
				},
				askInfo:{
						detail: '',
						expertId: '',
						expertName: '',
						title: '',
						type:'',
						userId: '',
						userName:'',
						userPhone: ''
				},
				selectedIndex:0,
				seleMemberIndex:0,
				showMask: false,
				showMaskMember:false,
				maskClass: {
					'position': 'fixed',
					'bottom': 0,
					'top': 0,
					'left': 0,
					'right': 0,
					'background-color': 'rgba(0, 0, 0, 0.5)',
				},				
				transfromClass: {
					'position': 'fixed',
					'bottom': 0,
					'top': 0,
					'left': 0,
					'right': 0,
					'display': 'flex',
					'justify-content': 'center',
					'align-items': 'center'
				},
				transShow: false,
				modeClass: ['fade'],
			}
		},
		onLoad(option) {
			// this.getCategaty()
			this.orderStatus = option.orderType
			this.orderInfo.orderType =  option.orderType
			this.getMachineDetail(option.id);
			
		},
		methods:{
			getUser(){
				var value = uni.getStorageSync('userInfo') || []
				if(value.login_user == null){
					uni.navigateTo({
						url:"/subpages/pages/register/login_province"
					})
					uni.showToast({
						icon:'error',
						title:"请先登录！"
					})
					this.showMask = false
					this.showMaskMember = false
					return
				}else{
					this.orderInfo.userName = value.login_user.member.username
					this.orderInfo.userId = value.login_user.member.id
					this.askInfo.userName = value.login_user.member.userName
					this.askInfo.userId = value.login_user.member.id
				}
			},
			getMachineDetail(id){
				zjfw.getMemberList(id).then((res)=>{
					this.machineDetail = res.data
					if(res.data.contentList && res.data.contentList.length != 0){
						this.contentList = res.data.contentList 
					}
					this.personList = res.data.personList
					this.machineDetail.memberServer.logoImg = `${env.imgUrl}` + this.machineDetail.memberServer.logoImg
					this.orderInfo.orderType = this.machineDetail.memberServer.serverType
					this.personList.forEach(v => {
						v.photo = `${env.imgUrl}` + v.photo
					})
				})
			},
			dial(){
				this.showPopup = true
			},
			toggle(type) {
			 //    this.type = type;
			 //    // this.$refs['popup'].open();
				// this.modeClass = mode
				// this.transShow = !this.transShow
				this.showMask = true
				this.getUser()
			},
			closePopup() {
				// this.$refs['popup'].close();
				this.showMask = false
			},
			closePopupMember() {
				// this.$refs['memberPopup'].close();
				this.showMaskMember = false
			},
			toggle1(type) {
			    this.type = type;
			    // this.$refs['memberPopup'].open();
				this.showMaskMember = true
				this.getUser()
			},
			setInfo(index){
				this.selectedIndex = index
			},
			setMember(index){
				this.seleMemberIndex = index
			},
			change(e) {
			},
			bindDateChange(e) {
				this.date = e.detail.value;
			},
			submitOrder(){
				if(this.orderInfo.userTelphone == ''){
					uni.showToast({
						icon:"none",
						title:"联系电话不能为空！"
					})
				}else{
					uni.showLoading({})
					this.orderInfo.subscribeDate = this.date
					this.orderInfo.serverId = this.machineDetail.contentList[this.selectedIndex].id
					this.orderInfo.serverName = this.machineDetail.contentList[this.selectedIndex].title
					order.addORDER(this.orderInfo).then((res)=>{
						if(res.code == '200'){
							uni.navigateTo({
								url:'/subpages/pages/my/orderList/order_list'
							})
							uni.hideLoading()
							this.showMask = false
						}
					})
				}
			},
			submitAsk(){
				if(this.askInfo.detail == '' || this.askInfo.title == ''){
					uni.showToast({
						icon:"none",
						title:"请输入咨询内容！"
					})
				}else if(this.askInfo.userPhone == ''){
					uni.showToast({
						icon:"none",
						title:"联系电话不能为空！"
					})
				}else{
					this.askInfo.type = '3'
					this.askInfo.expertId = this.machineDetail.personList[this.seleMemberIndex].id
					this.askInfo.expertName = this.machineDetail.personList[this.seleMemberIndex].name
					ask.addMyAsk(this.askInfo).then((res)=>{
						if(res.code == 200){
							uni.navigateTo({
								url:'/subpages/pages/my/ask/ask_list'
							})
							this.showMaskMember = false
						}
					})
				}
			}
		}
	}
	
</script>

<style>
	
	.main {
		background-color: #e1e1e1;
	}
	
	image {
		width: 100%;
	}
	
	.top-name{
		height: 80rpx;
		margin-top: 15rpx;
		background-color: #fff;
		line-height: 80rpx;
	}
	
	.type{
		height:80rpx;
		background-color: #fff;
		margin-top: 15rpx;
		padding-top: 15rpx;
	}
	
	.content{
		height:fit-content;
		background-color: #fff;
	}
	
	.title {
		font-size: 35rpx;
		font-weight: 700;
		padding: 15rpx;
		margin-bottom: 25rpx;
	}
	
	.creator {
		font-size: 28rpx;
		padding: 15rpx;
		float: left;
	}
	
	.publishTime {
		font-size: 28rpx;
		padding: 15rpx;
		float: right;
	}
	
	.detail_content {
		margin-top: 15rpx;
/* 		text-indent: 2em; */
		line-height: 50rpx;
		justify-content: flex-start;
		padding: 25rpx;
	}
	
	.uni-form-item {
		margin: 30rpx 30rpx;
		border-radius: 50px;
		}
		
	.uni-form-item button{
		background-color: #016fb8;
		height: 70rpx;
		font-size: 28rpx;
		margin-top: 20rpx;
	}
	
	.login_from_input{
		width: 100%; 
		height:auto; 
		display: flex; 
		flex-direction: row; 
		justify-content: space-between; 
		align-items: center; 
		border-bottom: 1px #eee solid; 
		padding: 20upx 0px; 
		margin: 0px auto; 
		background-color: #fff;
	} 
	
	.login_from_name{
		width: 30%; 
		margin-left: 40rpx;
		font-size: 30rpx;
	}
	.login_from_fun{ 
		width: 70%; 
		display: flex; 
		flex-direction: row; 
		justify-content: flex-end; 
		text-align: right; 
		margin-left: 25rpx;
	}
	
	.login_from_fun input{ 
		width: 100%; 
		text-align: left; 
		font-size: 15px;  
	}
	
	/deep/ .uni-popup .uni-popup__wrapper {
	    width: 70% !important;
		margin: 0 auto;
	}
	
	.service-range {
		height: 350rpx;
		margin-top:15rpx;
		background-color: #fff;
		padding: 25rpx;
		text-align: center;
	}

	.devideline {
		float: left; 
		height: 0.3rpx;
		width:100%;
		background-color: #eeeeee;
		margin-top: 15rpx;
		margin-bottom: 15rpx;
	}
	
	/* // uni-popup样式重置 */
	  /deep/.popup-style .uni-popup-dialog {
			position: fixed;
			top: 30%;
			left: calc((100vw - 300px)/2);
	    }
	  
		/* // 遮罩层 */
	/deep/.popup-style .mark {
			height: 100vh; 
			width: 100vw; 
			background: rgba(0, 0, 0, 0.5); 
			position: absolute;
			left: 0%;
			right: 0%;
			z-index: 1;
	}
	
	.maskClass {
		position:fixed;
		bottom:0;
		top:0;
		left:0;
		right:0;
		background-color:rgba(0, 0, 0, 0.5);
		z-index: 2;
	}	
	
	.submit_view {
		height: 90rpx;
	}
		
	.submit_view .submit{
		background-color: #016fb8;
		height: 70rpx;
		width: 40%;
		font-size: 28rpx;
		margin-top: 20rpx;
		float: left;
	}
	.submit_view .canncle{
		background-color: darkgray;
		height: 70rpx;
		width: 40%;
		font-size: 28rpx;
		margin-top: 20rpx;
		float: right;
	}
</style>